import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import { Card, CardText } from 'material-ui/Card';
import CircularProgress from 'material-ui/CircularProgress/CircularProgress';

import MenuItem from 'material-ui/MenuItem';
import SelectField from 'material-ui/SelectField';

import CONFIG from '../../config';
import { errorHandle } from '../Utils/ErrorHandle';
import { parseJSON, getMethod } from '../../redux/Helper';

export default class EditSchoolInfo extends Component {
  state = {
    isFetchingProfessionals: false,
    collegeNodes: [],
    professionalNodes: [],
  };

  componentDidMount() {
    let url = CONFIG.apiHost + '/api/colleges';
    fetch(url, getMethod)
    .then(parseJSON)
    .then(res => {
      const collegeNodes = res.map((item, index) => 
        <MenuItem key={index} value={item} primaryText={item} />
      );
      this.setState({collegeNodes});
    });
    
    if (this.props.college != null) {
      let request = `?college=${this.props.college}`;
      let url = `${CONFIG.apiHost}/api/professionals${request}`;
      fetch(url, getMethod)
      .then(parseJSON)
      .then(res => {
        const professionalNodes = res.map((item, index) => 
          <MenuItem key={index} value={item} primaryText={item} />
        );
        this.setState({professionalNodes});
      });
    }
  }

  handleCollegeSelection = (event, index, value) => {
    if (value) {
      this.props.handleChangeSelectValue('college', value);
      this.setState({isFetchingProfessionals: true }, () => {
        let request = `?college=${value}`;
        let url = `${CONFIG.apiHost}/api/professionals${request}`;
        fetch(url, getMethod)
        .then(parseJSON)
        .then(res => {
          const professionalNodes = res.map((item, index) => 
            <MenuItem key={index} value={item} primaryText={item} />
          );
          this.setState({professionalNodes, isFetchingProfessionals: false});
          this.props.handleChangeSelectValue('professional', null);
        });
      });
    }
  };

  render() {
    const { collegeNodes, professionalNodes } = this.state;

  	return (
  	  <Card className='card-line center-block' style={styles.card}>
        <CardText style={{
          paddingLeft: 24,
          paddingRight: 24
        }}>
          
          <SelectField
            floatingLabelText='选择学校'
            underlineStyle={{display: 'none'}}
            value={this.props.college}
            onChange={this.handleCollegeSelection}
            errorText={errorHandle(this.props.error, 'college')}
          >
            {collegeNodes}
          </SelectField><br/>

          {this.state.isFetchingProfessionals ? 
            <CircularProgress 
              size={20} 
              thickness={2.5} 
              style={{marginRight: 10}}
            /> : ''
          }
          <SelectField
            floatingLabelText='选择专业'
            underlineStyle={{display: 'none'}}
            value={this.props.professional}
            onChange={this.props.handleChangeSelect.bind(this, 'professional')}
            errorText={errorHandle(this.props.error, 'professional')}
            disabled={professionalNodes.length === 0 ? true : false}
          >
            {professionalNodes}
          </SelectField><br/>

          <SelectField
            floatingLabelText='入学年份'
            underlineStyle={{display: 'none'}}
            value={this.props.collegeEntry}
            onChange={this.props.handleChangeSelect.bind(this, 'collegeEntry')}
            errorText={errorHandle(this.props.error, 'college_entry')}
          >
            <MenuItem value='2013' primaryText='2013' />
            <MenuItem value='2014' primaryText='2014' />
            <MenuItem value='2015' primaryText='2015' />
            <MenuItem value='2016' primaryText='2016' />
          </SelectField><br/>

          <TextField
            floatingLabelText="学号"
            style={{marginRight: 24}}
            defaultValue={this.props.studentId}
            onChange={this.props.handleChangeText.bind(this, 'studentId')}
            errorText={errorHandle(this.props.error, 'student_id')}
          />
        </CardText>
      </Card>
  	);
  }
}

const styles = {
  card: {
    maxWidth: 728,
    position: 'relative',
    marginBottom: 0
  },
};